import React, { useState } from 'react';
import {  FundProjectionScreenOutlined, FileSearchOutlined, } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import shuju from  '../../../router/shuju'
const { Header, Content, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];

function Conference(props: any) {
    let navigate = useNavigate()
    const [lujing, setLujing] = useState([]);
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    const items2: MenuItem[] = [
        getItem('会议室管理', '/index/conference/manage', <FundProjectionScreenOutlined />),
        getItem('会议室预定记录', '/index/conference/record', <FileSearchOutlined />),
    ]
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    var tiao = (e: any) => {  //跳转页面
        var lujing = e.keyPath.reverse()
    setLujing(lujing)
        navigate(e.key)
    }
    return (
        <div>
            <Layout>
                <Sider width={200} style={{ backgroundColor: 'white' }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['/index/conference/manage']}
                        defaultOpenKeys={['/index/conference/manage']}
                        style={{ height: '100%', borderRight: 0 }}
                        items={items2}
                        onClick={tiao}
                    />
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
            {
                lujing.map((item, index) => {
                  return (
                    <Breadcrumb.Item key={index}>{shuju[item]}</Breadcrumb.Item>
                  )
                })
              }
                    </Breadcrumb>
                    <Outlet />
                </Layout>
            </Layout>
        </div>
    );
}

export default Conference;